<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱状图</title>
    <link rel="stylesheet" href="../../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../../css/oksub.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div class="layui-row">
    <form class="layui-form" style="margin-top:15px;margin-bottom: 25px" action="">
        <div class="layui-inline">
            <label class="layui-form-label">时间</label>
            <div class="layui-input-block">
                <select name="dateType" id="dateType" lay-verify="dateType">
                    <option value='1'>最近一个月</option>
                    <option value='2'>最近三个月</option>
                    <option value='3'>最近半年</option>
                    <option value='4'>最近一年</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">医院</label>
            <div class="layui-input-block">
                <div id="selhospital" style="width: 205px"></div>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-inline" style="margin-right: 8px">
                <button class="layui-btn" id="search">
                    <i class="layui-icon layui-icon-search" style="font-size: 14px">搜索</i>
                </button>
            </div>
        </div>
    </form>
</div>

<div id="main" style="width: 100%;height:400px;margin-top: 50px;"></div>

<script src="../../../lib/echarts/echarts.min.js"></script>
<script src="../../../lib/layui/layui.js"></script>
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/application.js"></script>
<script src="../../../js/selectMore.js"></script>
<script type="text/javascript">
    layui.use(['layedit', 'upload', 'element', 'form', 'okLayer'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let okLayer = layui.okLayer;

        //部门多选下拉框
        var selhospital = xmSelect.render({
            el: '#selhospital',
            toolbar: {show: true},
            data: [{'value':"医院1",name:"医院1"},{'value':"医院2",name:"医院2"}]
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));


        var list = [{"hospitalName":"医院1","allCount":"10","endCount":"5","noEndCount":"5"},{"hospitalName":"医院2","allCount":"13","endCount":"10","noEndCount":"3"}];
        var hospitalName = [];
        var allCount = [];
        var endCount = [];
        var noEndCount = [];
        for (var i = 0; i < list.length; i++) {
            hospitalName.push(list[i]['hospitalName']);
            allCount.push(list[i]['allCount']);
            endCount.push(list[i]['endCount']);
            noEndCount.push(list[i]['noEndCount']);
        }
        chart(hospitalName, allCount, endCount, noEndCount)
        
        //渲染柱状图
        function chart(hospitalName, allCount, endCount, noEndCount) {
            myChart.setOption({
                title: {
                    //text: ''
                },
                tooltip: {},
                legend: {
                    data: ['已诊断病情', '未诊断病情', '病情总量']
                },
                xAxis: {
                    name: '各医院',
                    data: hospitalName
                },
                yAxis: {
                    type: 'value',
                    name: '病情数量',
                    min: 0,
                    interval: 5,
                    minInterval: 1,
                },
                series: [{
                    name: '已诊断病情',
                    type: 'bar',
                    data: endCount,
                    itemStyle: {
                        normal: {
                            color:'#61a0a8',
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },

                }, {
                    name: '未诊断病情',
                    type: 'bar',
                    data: noEndCount,
                    itemStyle: {
                        normal: {
                            color:'#c23531',
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },

                },{
                    name: '病情总量',
                    type: 'bar',
                    data: allCount,
                    itemStyle: {
                        normal: {
                            color:'#2f4554',
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },
                }]

            });
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    })
</script>
</body>
</html>
